<template>
    <Transition @click=close name="router">
        <div v-show="flag" class="comments_big_shadow"></div>
    </Transition>
    <Transition name="content">
        <div v-show="flag" class="comments_big_content">
            <div class="comments_big_content_top">
                {{ list.length }}条评论
            </div>
            <div class="comments_big_content_list">
                <div @touchend="touchend" @touchstart="touchstart(item)" v-for="item, index in  list "
                    class="comments_big_content_list_item" :key="index">
                    <div class="comments_big_content_list_item_img">
                        <img
                            :src="'http://43.138.15.137:3000' + (!item.Comment.userAvatar ? '/assets/avatar/default.png' : item.Comment.userAvatar)">
                    </div>
                    <div class="comments_big_content_list_item_center">
                        <div class="comments_big_content_list_item_center_top">
                            @ {{ item.Comment.userNickname }}
                        </div>
                        <div class="comments_big_content_list_item_center_center">
                            {{ item.Comment.commentContent }}
                        </div>
                        <div class="comments_big_content_list_item_center_btm">
                            {{ date(item.Comment.createdAt) }}
                        </div>
                    </div>
                    <div v-fangdou class="comments_big_content_list_item_right">
                        <div @click="comments_likefn(item, index)" class="comments_big_content_list_item_right_top">
                            <div class="aixin_top"></div>
                            <div class="aixin_btm"></div>
                        </div>
                        <div class="comments_big_content_list_item_right_btm">
                            {{ item.likeNum }}
                        </div>
                    </div>
                </div>
                <div class="comments_big_content_list_item_text">暂时没有更多了</div>
                <div class="bbb"></div>
                <div class="comments_big_content_list_item_btm">
                    <input ref="input" v-model="content" :placeholder="input_plecehold" type="text">
                    <div class="aite">@</div>
                    <div @click="post_commentsfn" class="fasong">√</div>
                </div>
            </div>
        </div>
    </Transition>
    <MyMessage :flag="alert_flag" :text="error_text" />
</template>
<script setup>
import { defineAsyncComponent, computed, ref } from 'vue'
import { comments_like, post_comments } from '../../api/api.js'
const emit = defineEmits(['update:flag', 'post_comments'])
const props = defineProps(
    {
        flag: {
            type: Boolean,
            default: () => false
        },
        list: {
            type: Array,
            default: () => []
        }
    }
)
let input_plecehold = ref('有爱评论，说点儿好听的~（长按评论回复)')
let set = ''
let replyId = ref('')
let content = ref('')
const date = computed(() => {
    return function (str) {
        return new Date(str).getFullYear() + '-' + new Date(str).getMonth() + '-' + new Date(str).getDate()
    }
})
let alert_flag = ref()
let error_text = ref()
function touchstart(item) {
    replyId.value = ''
    input_plecehold.value = '有爱评论，说点儿好听的~（长按评论回复)'
    set = setTimeout(() => {
        input_plecehold.value = '@' + item.Comment.userNickname
        replyId.value = item.Comment.commentId
    }, 1000)
}
function touchend() {
    clearTimeout(set)
}
function post_commentsfn() {
    post_comments('api/user/commentVideo', {
        fromUserId: JSON.parse(localStorage.getItem('user')).userId,
        replyId: replyId.value,
        content: content.value,
        toVideoId: props.list[0].Comment.videoId
    }).then().then(res => {
        if (res.data.code == 200) {
            alertfn('评论成功')
            emit('post_comments', {
                Comment: {
                    commentContent: content.value,
                    commentId: res.data.data.commentId,
                    commentReplyID: res.data.data.commentReplyID,
                    createdAt: res.data.data.createdAt,
                    userAvatar: "/assets/avatar/default.png",
                    userId: res.data.data.userId,
                    userNickname: '用户' + res.data.data.userId.substring(1, 6),
                    videoId: res.data.data.videoId,
                },
                likeNum: "0",
            })
        } else {
            alertfn('评论失败')
        }
        content.value = ''
    })
}
function alertfn(text) {
    error_text.value = text
    alert_flag.value = true
    setTimeout(() => {
        alert_flag.value = false
    }, 1000)
}
function comments_likefn(item, index) {
    comments_like(`api/user/${item.Comment.userId}/triggerLikeComment/${item.Comment.videoId}/${item.Comment.commentId}`).then().then(res => {
        if (res.data.code == 200) {
            if (!item.likeflag) {
                document.querySelectorAll('.comments_big_content_list_item_right_top')[index].style = `background:red;`
                document.querySelectorAll('.aixin_top')[index].style = `background:red;`
                document.querySelectorAll('.aixin_btm')[index].style = `background:red;`
                item.likeflag = true
                item.likeNum++
                alertfn('喜欢评论成功')
            } else {
                document.querySelectorAll('.comments_big_content_list_item_right_top')[index].style = ``
                document.querySelectorAll('.aixin_top')[index].style = ``
                document.querySelectorAll('.aixin_btm')[index].style = ``
                item.likeflag = false
                item.likeNum--
                alertfn('取消喜欢成功')
            }
        } else {
            alertfn('操作失败')
        }
    })
}
function close() {
    emit('update:flag', false)
}
</script>
<style lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.comments_big_content_list_item_btm {
    position: fixed;
    bottom: 0;
    left: 0;
    height: r(50);
    width: 100%;
    background-color: #fff;
    display: flex;
    background: #1a1b20;

    .aite,
    .fasong {
        width: r(44);
        height: 100%;
        text-align: center;
        color: #e8e8e9;
        font-size: r(14);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    input {
        flex: 1;
        background-color: #62626000;
        padding-left: r(10);
        font-size: r(14);
        color: #e8e8e9;
    }
}

.bbb {
    height: r(50);
}

.comments_big_content_list_item_text {
    text-align: center;
    font-size: r(12);
    color: #65676e;
    padding-bottom: r(12);
    padding-top: r(12);
}



.comments_big_content_list_item {
    height: r(70);
    display: flex;
    align-items: center;
    padding-left: r(10);

    .comments_big_content_list_item_right {
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: r(50);

        .comments_big_content_list_item_right_btm {
            color: #505052;
            margin-top: r(5);
            font-size: r(12)
        }

        .comments_big_content_list_item_right_top {
            width: r(10);
            height: r(10);
            position: relative;
            background-color: #505052;
            transform: rotate(-45deg);
            transition: all 0.5s;

            .aixin_top {
                position: absolute;
                width: r(10);
                height: r(10);
                border-radius: 50%;
                top: 0;
                left: 0;
                transform: translateY(-50%);
                background-color: #505052;
                transition: all 0.5s;
            }

            .aixin_btm {
                position: absolute;
                width: r(10);
                height: r(10);
                border-radius: 50%;
                top: 0;
                right: 0;
                transform: translateX(50%);
                background-color: #505052;
                transition: all 0.5s;
            }
        }
    }

    .comments_big_content_list_item_img {
        width: r(40);
        height: r(40);

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

    .comments_big_content_list_item_center {
        margin-left: r(10);
        border-bottom: 1px solid rgba(41, 40, 37, 0.8);
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;

        .comments_big_content_list_item_center_top {
            color: #a6a5a4;
            font-size: r(12);
        }

        .comments_big_content_list_item_center_center {
            color: #e8e8e9;
            font-size: r(14);
        }

        .comments_big_content_list_item_center_btm {
            color: #626260;
            font-size: r(12);
            margin-top: r(2);
        }
    }
}

.comments_big_content_list {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.comments_big_content_top {
    width: 100%;
    position: relative;
    text-align: center;
    padding: r(10) 0;
    color: #626260;
    font-size: r(12);
    font-weight: 600;
}

.comments_big_shadow {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000c2;
    z-index: 20;
}

.comments_big_content {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 80vh;
    width: 100%;
    background: rgba(22, 24, 35, 0.98);
    z-index: 21;
    display: flex;
    flex-direction: column;
}

.router-enter-active {
    animation: shadow 0.7s ease;
}

.router-leave-active {
    animation: shadow 0.7s ease reverse;
}

@keyframes shadow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.content-enter-active {
    animation: content 0.7s ease;
}

.content-leave-active {
    animation: content 0.7s ease reverse;
}

@keyframes content {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0%);
    }
}
</style>